<template>
    <div>
        <div class="common-form">
            <span>{{ curItem.name }}</span>
        </div>
        <el-form :model="curItem" label-width="100px">
            <div class="f16 gray3 form-subtitle">{{$t('page.image')}}：</div>
            <div class="d-c-c param-img-item navbar" @click="$parent.onEditorSelectImage(curItem.params, 'imgUrl')">
                <div class="right pr">
                    <div class="icon d-c-c">
                        <img :style="{ height: curItem.style.height * 0.5 + 'px' }" v-img-url="curItem.params.imgUrl"
                            alt="" />
                    </div>
                </div>
            </div>
            <div class="form-chink"></div>
            <div class="f16 gray3 form-subtitle">{{ $t('page.color_setting') }}</div>
            <div class="form-item">
                <div class="form-label">{{ $t('page.footer_bg_label') }}</div>
                <div class="flex-1 d-s-c" style="height: 36px;">
                    <el-color-picker size="default" v-model="curItem.style.box_background"></el-color-picker>
                    <el-input class="ml10" v-model="curItem.style.box_background" />
                    <el-button style="margin-left: 10px;"
                        @click.stop="$parent.onEditorResetColor(curItem.style, 'box_background', '#ff4c01')"
                        type="primary" link>{{
                            $t('page.reset') }}</el-button>
                </div>
            </div>
            <div class="form-chink"></div>
            <div class="f16 gray3 form-subtitle">{{ $t('page.margin_setting') }}</div>
            <!--上下边距-->
            <div class="form-item">
                <div class="form-label">{{ $t('page.margin_top_label') }}</div>
                <el-slider v-model="curItem.style.box_paddingTop" size="small" show-input :show-input-controls="false"
                    input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{ $t('page.margin_bottom_label') }}</div>
                <el-slider v-model="curItem.style.box_paddingBottom" size="small" show-input
                    :show-input-controls="false" input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{$t('page.margin_left_label')}}：</div>
                <el-slider v-model="curItem.style.box_paddingLeft" size="small" show-input :show-input-controls="false"
                    input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{$t('page.margin_right_label')}}：</div>
                <el-slider v-model="curItem.style.box_paddingRight" size="small" show-input :show-input-controls="false"
                    input-size="small"></el-slider>
            </div>
            <div class="form-chink"></div>
            <div class="f16 gray3 form-subtitle">{{ $t('page.border_radius_setting') }}</div>
            <div class="form-item">
                <div class="form-label">{{$t('page.top_left_corner')}}：</div>
                <el-slider v-model="curItem.style.img_borderTopLeftRadius" size="small" show-input
                    :show-input-controls="false" input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{$t('page.top_right_corner')}}：</div>
                <el-slider v-model="curItem.style.img_borderTopRightRadius" size="small" show-input
                    :show-input-controls="false" input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{$t('page.bottom_left_corner')}}：</div>
                <el-slider v-model="curItem.style.img_borderBottomLeftRadius" size="small" show-input
                    :show-input-controls="false" input-size="small"></el-slider>
            </div>
            <div class="form-item">
                <div class="form-label">{{$t('page.bottom_right_corner')}}：</div>
                <el-slider v-model="curItem.style.img_borderBottomRightRadius" size="small" show-input
                    :show-input-controls="false" input-size="small"></el-slider>
            </div>
            <div class="form-chink"></div>
            <div class="f16 gray3 form-subtitle">{{$t('page.hot_zone_editor')}}</div>
            <div class="form-item">
                <div class="form-label"></div>
                <el-button type="primary" @click="show = true">{{$t('page.add_hot_zone')}}</el-button>
            </div>
            <div class="form-item" v-for="item, idx in curItem.data">
                <div class="form-label">
                    {{$t('page.hot')}}{{ idx + 1 }}：
                </div>
                <div class="d-s-c  ww100">
                    <div class="url-box flex-1 d-s-c">
                        <span class="key-name">{{ $t('page.link') }}</span>
                        <el-input v-model="item.linkUrl">
                            <template #suffix>
                                <el-icon @click="changeLink(idx)" color="#333" size="16px">
                                    <ArrowRight />
                                </el-icon>
                            </template>
                        </el-input>
                    </div>
                    <el-icon class="el-icon-DeleteFilled" @click="deleteHot(idx)">
                        <CloseBold />
                    </el-icon>
                </div>
            </div>
        </el-form>
        <el-dialog :title="$t('page.click_to_generate_hot_zone')" v-model="show">
            <div class="d-c-c " style="flex-direction: row;">
                <div class="d-c-c">
                    <div class="edit-box" ref="eidtBox" @mousedown="editMousedown" @mousemove="editMousemove"
                        @mouseup="editMouseup" :style="{ height: boxHeight + 'px' }">
                        <div v-for="item, idx in curItem.data" class="hot d-c-c" :class="{ active: item == activeHot }"
                            :key="idx" @mousedown.stop="mousedownHot($event, item)" ref="hotDom"
                            :style="{ width: item.width * 100 + '%', height: item.height * 100 + '%', left: (item.x + item.mx) * 100 + '%', top: (item.y + item.my) * 100 + '%' }">
                            {{ idx + 1 }}
                            <div class="del" @click="deleteHot(idx)">
                                <el-icon>
                                    <Delete />
                                </el-icon>
                            </div>
                        </div>
                        <img v-img-url="curItem.params.imgUrl" @load="imgLoad" alt="">
                    </div>
                </div>
                <div style="margin-left: 20px;max-height: 500px; overflow: auto;">
                    <div v-for="item, idx in curItem.data" style="margin: 10px 0; padding: 4px;"
                        :class="{ activeHot: item == activeHot }">
                        <div class="form-label">
                            {{$t('page.hot')}}{{ idx + 1 }}：
                        </div>
                        <div class="d-s-c  ww100">
                            <div class="url-box flex-1 d-s-c">
                                <el-input v-model="item.linkUrl">
                                    <template #suffix>
                                        <el-icon @click="changeLink(idx)" color="#333" size="16px">
                                            <ArrowRight />
                                        </el-icon>
                                    </template>
                                </el-input>
                            </div>
                            <el-icon class="el-icon-DeleteFilled" @click="deleteHot(idx)">
                                <CloseBold />
                            </el-icon>
                        </div>
                    </div>
                </div>
            </div>

        </el-dialog>
        <Setlink v-if="is_linkset" :is_linkset="is_linkset" @closeDialog="closeLinkset">{{ $t('page.select_link') }}
        </Setlink>
    </div>
</template>
<script>
import Setlink from '@/components/setlink/Setlink.vue';
import { del } from 'vue-demi';
export default {
    components: {
        Setlink,
    },
    data() {
        return {
            show: false,
            hotData: [],
            activeHot: null,
            sx: 0,
            sy: 0,
            boxHeight: 100,
            isdown: false,
            is_linkset: false,
            index: 0
        }
    },
    props: ['curItem', 'selectedIndex'],
    mounted() {
        this.curItem.data = this.curItem?.data.map(item => {
            for (let key in item) {
                if (!isNaN(item[key] * 1)&&item[key]) {
                    item[key]=item[key]*1
                }
            }
            return item
        })
        window.addEventListener('mouseup', () => {
            this.isdown = false;
            if (this.show) {
                this.$refs.hotDom?.forEach((item, i) => {
                    this.curItem.data[i].width = item.getBoundingClientRect().width / this.getRect().width;
                    this.curItem.data[i].height = item.getBoundingClientRect().height / this.getRect().height;
                });
            }

        });

    },
    methods: {
        getPosition(e) {
            let rect = this.getRect();
            let x = e.clientX - rect.left;
            let y = e.clientY - rect.top;
            return { x, y, width: rect.width, height: rect.height };
        },
        imgLoad(e) {
            this.boxHeight = e.target.height;
        },
        getRect() {
            return this.$refs.eidtBox.getBoundingClientRect();
        },
        // 创建热区数据
        createHotData(x, y) {
            this.curItem.data.push({
                x: x,
                y: y,
                width: 100 / this.getRect().width,
                height: 100 / this.getRect().height,
                linkUrl: '',
                type: 'link',
                name: '',
                mx: 0,
                my: 0
            });
        },

        // 移动热区
        moveHot(hot, x, y) {
            hot.x = x;
            hot.y = y;
        },
        mousedownHot(e, hot) {
            this.isdown = true
            let rect = e.target.getBoundingClientRect()
            let boxRect = this.getRect();
            let x = e.clientX - rect.left;
            let y = e.clientY - rect.top;
            if (rect.width - x < 15 && rect.height - y < 15) {
                this.isdown = false;
                return
            }
            this.activeHot = hot
            this.sx = this.activeHot.x * boxRect.width + x;
            this.sy = this.activeHot.y * boxRect.height + y;
            console.log(this.activeHot)
        },
        editMousedown(e) {
            this.isdown = true
            let { x, y } = this.getPosition(e);
            this.sx = x, this.sy = y;
            this.activeHot = null

        },
        editMousemove(e) {
            if (!this.isdown) return;
            let { x, y, width, height } = this.getPosition(e);
            if (this.activeHot) {
                this.activeHot.mx = (x - this.sx) / width, this.activeHot.my = (y - this.sy) / height;
            }
        },
        editMouseup(e) {
            if (!this.isdown) return;
            let { x, y, width, height } = this.getPosition(e);
            if (!this.activeHot) {
                this.createHotData(x / width, y / height);
                this.activeHot = this.curItem.data[this.curItem.data.length - 1];
            } else {
                this.moveHot(this.activeHot, this.activeHot.x + (x - this.sx) / width, this.activeHot.y + (y - this.sy) / height)
                this.activeHot.mx = 0
                this.activeHot.my = 0
            }
        },
        /*选择链接*/
        changeLink(index) {
            this.is_linkset = true;
            this.index = index;
        },
        /*获取链接并关闭弹窗*/
        closeLinkset(e) {
            this.is_linkset = false;
            if (e) {
                this.curItem.data[this.index].linkUrl = e.url;
                this.curItem.data[this.index].name = $t("page.link_to") + ' ' + e.type + ' ' + e.name;
            }
        },
        deleteHot(index) {
            this.curItem.data.splice(index, 1);
        },
        toEditImage() {

        }
    }
}
</script>
<style lang="scss" scoped>
.el-icon-DeleteFilled {
    margin-left: 20px;
    background-color: red;
    color: white;
    border-radius: 50%;
    cursor: pointer;
    width: 20px;
    height: 20px;
}

.activeHot {
    background-color: rgba(#409eff, 0.3);

    border-radius: 4px;
}

.edit-box {
    position: relative;
    overflow: hidden;
    max-width: 500px;

    img {
        max-width: 100%;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        pointer-events: none;
    }

    .hot {
        background: rgba(#409eff, 0.3);
        border: 1px solid #409eff;
        position: absolute;
        overflow: hidden;
        resize: both;
        min-height: 20px;
        min-width: 20px;

        &.active {
            background: rgba(32, 165, 58, 0.3);
            border: 1px solid 32, 165, 58;
        }

        .del {
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            background-color: red;
            color: white;
            line-height: normal;
        }
    }

}
</style>